<template>
	<view class="container" v-if="userInfo.user_id > 0">
		<view class="space-upper">
			<view class="wallet-image"><image src="/static/images/wallet.png" mode="widthFix"></image></view>
			<view class="wallet-account">
				<view class="wallet-account_balance">
					<text>{{ userInfo.balance }}</text>
				</view>
				<view class="wallet-account_lable"><text>账户余额(元)</text></view>
			</view>
		</view>
		<view class="space-lower">
			<view v-if="setting.is_entrance" class="space-lower_item btn-recharge">
				<form @submit="onTargetRecharge" report-submit="true"><button formType="submit" class="btn-submit">充 值</button></form>
			</view>
			<view class="space-lower_item btn-withdraw">
				<form @submit="onTargetWithdraw" report-submit="true"><button formType="submit" class="btn-submit">提 现</button></form>
			</view>
			<view class="space-lower_item item-lable dis-flex flex-x-around">
				<form @submit="onTargetRechargeOrder" report-submit="true">
					<button formType="submit" class="btn-normal">
						<view class="lable-text"><text>充值记录</text></view>
					</button>
				</form>
				<form @submit="onTargetBalanceLog" report-submit="true">
					<button formType="submit" class="btn-normal">
						<view class="lable-text"><text>账单详情</text></view>
					</button>
				</form>
				<form @submit="onTargetWithdrawLog" report-submit="true">
					<button formType="submit" class="btn-normal">
						<view class="lable-text"><text>提现记录</text></view>
					</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
export default {
	data() {
		return {
			userInfo: {},
			setting: {}
		};
	},
	onShow() {
		this.getUserDetail();
	},
	methods: {
		getUserDetail() {
			this.$get(this.$api.getUserWallet, {}, res => {
				this.userInfo = res.data.userInfo;
				this.setting = res.data.setting;
			});
		},
		/**
		 * 跳转充值页面
		 */
		onTargetRecharge(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '../recharge/index'
			});
		},

		/**
		 * 跳转充值记录页面
		 */
		onTargetRechargeOrder(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '../recharge/order/index'
			});
		},

		/**
		 * 跳转账单详情页面
		 */
		onTargetBalanceLog(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '../wallet/balance/log'
			});
		},
		/**
		 * 跳转余额提现
		 */
		onTargetWithdraw(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '../withdraw/apply/apply'
			});
		},
		/**
		 * 跳转余额提现记录
		 */
		onTargetWithdrawLog(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '../withdraw/list/list'
			});
		}
		
	}
};
</script>

<style>
page,
.container {
	background: #fff;
}
.space-upper {
	padding: 150rpx 0;
	text-align: center;
}
.wallet-image image {
	width: 360rpx;
	height: 261.72rpx;
}
.wallet-account {
	margin-top: 20rpx;
}
.wallet-account_balance {
	font-size: 52rpx;
}
.wallet-account_lable {
	margin-top: 10rpx;
	color: #cec1c1;
	font-size: 24rpx;
}
.space-lower {
	margin-top: 10rpx;
	padding: 0 110rpx;
}
.btn-recharge,
.btn-withdraw {
	margin-top: 20rpx;
}
.btn-recharge button.btn-submit,
.btn-withdraw button.btn-submit {
	font-size: 30rpx;
	border: none;
	color: white;
	border-radius: 50rpx;
	padding: 0 120rpx;
	line-height: 2.8;
}
.btn-recharge button.btn-submit {
	background: #786cff;
}
.btn-withdraw button.btn-submit {
	background: #ff776b;
}
.item-lable {
	margin-top: 80rpx;
	font-size: 26rpx;
	color: rgb(94, 94, 94);
	padding: 0 60rpx;
}
</style>
